<template>
  <div class="main-container">
    <el-form inline>
      <el-form-item>
        <el-date-picker v-model="queryParam.dateRange" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryParam.workerId" placeholder="请选择员工">
          <el-option v-for="item in workerList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryParam.equipment" placeholder="请选择设备">
          <el-option v-for="item in equipmentList" :key="item.equipmentFullName" :label="item.equipmentFullName" :value="item.equipmentFullName"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
        <el-button type="primary" plain @click="reset()">重置</el-button>
        <!-- <el-button type="primary" plain @click="exportExcel()">导出</el-button> -->
      </el-form-item>
    </el-form>
    <el-table border :data="workingDetailData" :span-method="arraySpanMethod" :row-class-name="tableRowClassName" :height="tableHeight">
      <el-table-column label="序号" type="index" fixed="left" align="center" width="50"></el-table-column>
      <el-table-column prop="jobNumber" label="员工" fixed="left" align="center" width="70">
        <template slot-scope="scope"> {{ scope.row.jobNumber }} {{ scope.row.workerName }} </template>
      </el-table-column>

      <el-table-column prop="equipment" label="设备" align="center" min-width="250"></el-table-column>
      <el-table-column label="单双机" align="center" width="100">
        <el-table-column prop="single" label="设计" align="center" width="50">
          <template slot-scope="scope"> {{ scope.row.single == null ? '' : scope.row.single == true ? '单机' : '双机' }} </template>
        </el-table-column>
        <el-table-column prop="singleFinish" label="完工" align="center" width="50">
          <template slot-scope="scope"> {{ scope.row.singleFinish == null ? '' : scope.row.singleFinish == true ? '单机' : '双机' }} </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="时间" align="center" width="145">
        <template slot-scope="scope"> {{ scope.row.beginDateTime }} {{ scope.row.endDateTime }} </template>
      </el-table-column>
      <el-table-column prop="realHour" label="时长" align="center" width="60"></el-table-column>
      <el-table-column prop="number" label="数量" align="center" width="50"></el-table-column>

      <el-table-column label="平均用时" align="center" width="60">
        <template slot-scope="scope"> {{ scope.row.singleFinish == null ? '' : (scope.row.realHour / scope.row.number).toFixed(2) }} </template>
      </el-table-column>
      <el-table-column prop="quotaHour" label="定额工时" align="center" width="50"> </el-table-column>

      <el-table-column prop="dispatchFormNumber" label="派工单号" align="center" width="110"></el-table-column>
      <el-table-column prop="processName" label="工序" align="center" min-width="100">
        <template slot-scope="scope"> {{ scope.row.sequenceNumber }} {{ scope.row.processName }} </template>
      </el-table-column>
      <el-table-column prop="dispatchNumber" label="工序数量" align="center" width="80"></el-table-column>

      <el-table-column prop="drawingNumber" label="图号" align="center" min-width="120"></el-table-column>
      <el-table-column prop="productName" label="品名" align="center" min-width="120"></el-table-column>

      <el-table-column prop="noticeNumber" label="通知单号" align="center" width="100"></el-table-column>

      <!-- <el-table-column prop="submitDateTime" label="填报时间" fixed="right" align="center" width="100"></el-table-column> -->
      <el-table-column prop="recordState" label="状态" fixed="right" align="center" width="80"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="100" v-if="$checkAuth('管理者工序回退')">
        <template slot-scope="scope">
          <el-button @click="confirmRecord(scope.row)" type="text" size="small" v-if="scope.row.state <= 1 && scope.row.single != null">确认</el-button>
          <el-button @click="sendBackRecord(scope.row)" type="text" size="small" v-if="scope.row.state == 2 && scope.row.single != null"> 退回 </el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="realWorkHour" label="实动工时" align="center" width="80"></el-table-column>
      <el-table-column prop="hourPrice" label="小时单价" align="center" width="80"></el-table-column>
      <el-table-column prop="workHour" label="总工时" align="center" fixed="right" min-width="80"></el-table-column>
      <el-table-column prop="workPrice" label="总价钱" align="center" fixed="right" min-width="80"></el-table-column> -->
    </el-table>
    <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageChange"
      :current-page="queryParam.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryParam.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNumber"
      background
      class="mt10"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
import { getActualWorkingDetail, confirmWorkRecord, sendBackWorkRecord } from '@/api/report'
import { getUserWorkerList, selectEquipmentList } from '@/api/interface1'
import { Component, Vue } from 'vue-property-decorator'
import { Message } from 'element-ui'
import dayjs from 'dayjs'
@Component({
  components: {}
})
export default class SalaryDetail extends Vue {
  tableHeight: any = '800px'
  created() {
    this.getWorkerList()
    this.getEquipmentList()
    // 获取屏幕高度 设置表格高度
    let screenHeight = document.documentElement.clientHeight
    console.log('获取到的屏幕高度：' + screenHeight)
    this.tableHeight = screenHeight - 230 + 'px'
  }
  // exportExcel() {
  //   let param = {
  //     workerId: this.queryParam.workerId,
  //     beginDate: dayjs(this.queryParam.dateRange[0]).format('YYYY-MM-DD'),
  //     endDate: dayjs(this.queryParam.dateRange[1]).format('YYYY-MM-DD')
  //   }
  //   window.open('/salary/detail/export?' + 'workerId=' + param.workerId + '&' + 'beginDate=' + param.beginDate + '&' + 'endDate=' + param.endDate)
  // }
  workerList: any = []
  equipmentList: any = []
  workingDetailData: any = []
  totalNumber: number = 0
  queryParam: any = {
    workerId: '',
    equipment: '',
    dateRange: [new Date(new Date().getTime() - 24 * 60 * 60 * 1000), new Date()],
    page: 1,
    pageSize: 20
  }

  async query() {
    let param = {
      workerId: this.queryParam.workerId,
      equipment: this.queryParam.equipment,
      beginDate: dayjs(this.queryParam.dateRange[0]).format('YYYY-MM-DD'),
      endDate: dayjs(this.queryParam.dateRange[1]).format('YYYY-MM-DD'),
      page: this.queryParam.page,
      pageSize: this.queryParam.pageSize
    }

    let res = await getActualWorkingDetail(param)
    if (res) {
      this.workingDetailData = res.data
      this.totalNumber = res.total
    }
  }

  reset() {
    this.queryParam = {
      workerId: '',
      equipment: '',
      dateRange: [new Date(new Date().getTime() - 24 * 60 * 60 * 1000), new Date()],
      page: 1,
      pageSize: 20
    }
  }

  /**
   * 获取工人列表
   */
  async getWorkerList() {
    let res = await getUserWorkerList().catch(err => {
      Message.error(err)
    })
    if (res) {
      this.workerList = res.data
    }
  }

  /**
   * 获取设备列表
   */
  async getEquipmentList() {
    let res = await selectEquipmentList().catch(err => {
      Message.error(err)
    })
    if (res) {
      this.equipmentList = res.data
    }
  }

  confirmRecord(record) {
    this.$confirm('工作记录确认', '', {
      distinguishCancelAndClose: true,
      cancelButtonText: '退回',
      confirmButtonText: '确认',
      type: 'warning'
    })
      .then(value => {
        this.confirmRecordApi(record, true)
      })
      .catch(action => {
        if (action === 'cancel') {
          this.confirmRecordApi(record, false)
        }
      })
  }
  async confirmRecordApi(record, result) {
    let res = await confirmWorkRecord({ recordId: record.recordId, result: result }).catch(err => {
      Message.error(err)
    })
    if (res) {
      this.query()
    }
  }
  // sendBackRecord(record) {
  //   this.$alert('功能已变更，若未报验工人可直接修改，若已报验请先退回报验记录')
  // }

  sendBackRecord(record) {
    let workDate = new Date(record.endDateTime)
    let now = new Date()

    let canSendBack = true
    // if (now.getMonth() > workDate.getMonth()) {
    //   if (workDate.getDate() >= 24) {
    //     canSendBack = true
    //   }
    // } else {
    //   if (now.getDate() < 24) {
    //     canSendBack = true
    //   } else if (now.getDate() >= 24 && workDate.getDate() > 24) {
    //     canSendBack = true
    //   }
    // }

    // 如果是超过结算日，不允许退回
    // 未超过结算日，直接退回
    if (canSendBack) {
      this.$confirm('工作记录退回', '', {
        cancelButtonText: '取消',
        confirmButtonText: '退回',
        type: 'warning'
      })
        .then(value => {
          this.sendBackApi(record.recordId)
        })
        .catch(() => {})
    } else {
      this.$alert('已过结算日，不可退回')
    }
  }
  async sendBackApi(id) {
    let res = await sendBackWorkRecord({ recordId: id }).catch(err => {
      Message.error(err)
    })
    if (res) {
      this.query()
    }
  }

  tableRowClassName({ row, rowIndex }) {
    if (row.singleNeedConfirm == true || row.recordState == '未确认' || row.recordState == '待确认' || row.recordState == '待审核') {
      return 'success-row'
    }
    return ''
  }

  /**合并单元格 */
  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    if (row.single == null) {
      if (columnIndex === 10) {
        return [1, 6]
      } else if ([11, 12, 13, 14, 15].indexOf(columnIndex) > -1) {
        return [0, 0]
      }
    }
  }

  // 分页功能
  pageSizeChange(newSize) {
    this.queryParam.pageSize = newSize
    this.query()
  }
  pageChange(newPage) {
    this.queryParam.page = newPage
    this.query()
  }
}
</script>

<style >
</style>